<!-- 添加至分组 -->
<template>
  <div class='add_group'>
    <Table :max-height="300" :columns="columns" :data="data" v-if="flagG"></Table>
    <div v-if="!flagG" class="user_warp clearfix">
      <div class="user_title">
        请确认，是否将以下{{deepCloneData.length}}名成员分配至“{{tableRowsData.groupName}}”？
      </div>
      <div>
        <p class="user_item" v-for="item in deepCloneData" :key="item.userId">
          {{item.userName}}
          <Icon type="md-close" class="close_icon" v-if="deepCloneData.length>1"
            @click="del_user(item)" />
        </p>
      </div>
    </div>
    <Row v-if="!flagG" class="user_warp">
      <Col span="3">
      <div class="join_date_label"><span class="rule">*</span> 入组日期：</div>
      </Col>
      <Col span="8">
      <DatePicker type="date" :value="joinDate" :options="options" placeholder="请选择入组日期"
        :transfer="true" :clearable=false @on-change="handleChange">
      </DatePicker>
      </Col>
    </Row>
    <div class="flex flex-horizontal-end btn-operate">
      <Button @click="handleClose">取消</Button>
      <Button type="primary" :disabled="data.length==0?true:false || flagG"
        @click="submitFun()" style="margin-left: 8px">确定</Button>
    </div>
  </div>
</template>

<script>
  import teamsApi from '@/biz/buildingManagement/teams'
  import addGroupColumns from '../../opt/addGroupColumns.js'
  export default {
    components: {},
    props: {
      userData: {
        type: Array,
        default: () => {
          return []
        },
      },
    },
    data() {
      return {
        columns: addGroupColumns.Columns,
        data: [],
        flagG: true,
        deepCloneData: this.$tool.deepClone(this.userData),
        teamId: this.$dt.session.get("teamsId"),
        userMess: this.$dt.userInfo(),
        tableRowsData: null,
        options: {
          disabledDate(date) {
            return date && date.valueOf() > Date.now()
          },
        },
        joinDate: ''
      }
    },
    computed: {},
    watch: {},
    methods: {
      //获取分组列表
      getGroupinit() {
        let params = {
          teamId: this.teamId,
        }
        teamsApi.queryAllTeamGroup(params).then((res) => {
          this.data = res
        })
      },
      handleChange(data) {
        this.joinDate = data
      },
      //分配至分组接口
      editChannel(obj) {
        this.flagG = false
        this.tableRowsData = obj
      },
      handleClose() {
        this.$emit('onClose')
      },
      del_user(obj) {
        this.deepCloneData = this.deepCloneData.filter(
          (item) => item.userId != obj.userId
        )
      },
      submitFun() {
        if (!this.joinDate) { return this.$Message.warning('请选择入组日期') }
        let usTeamGroupUserTmps = []
        this.deepCloneData &&
          this.deepCloneData.map((item) => {
            let obj = {
              createId: this.userMess.userId,
              createTime: '',
              groupId: this.tableRowsData.groupId,
              groupLeader: 2,
              updateId: this.userMess.userId,
              workNo: item.workNo,
            }
            usTeamGroupUserTmps.push(obj)
          })
        let params = {
          usTeamGroupUsers: usTeamGroupUserTmps,
          teamId: this.teamId,
          inGroupDate: this.joinDate
        }
        teamsApi.insertBatchTeamGroupUser(params).then((res) => {
          this.$Message.success(
            `已将${this.deepCloneData.length}名成员添加至“${this.tableRowsData.groupName}”`
          )
          this.handleClose()
          this.$emit('onChangeTable')
        })
      },
    },
    created() {},
    mounted() {
      addGroupColumns.sendThis(this)
      this.getGroupinit()
    },
  }
</script>
<style lang='scss' scoped>
  .add_group {
    .user_warp {
      padding: 20px;

      .user_title {
        font-size: 16px;
        margin-bottom: 20px;
      }

      .user_item {
        float: left;
        padding: 5px 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: rgba(242, 242, 242, 1);
        margin-right: 15px;

        .close_icon {
          font-size: 10px;
          font-weight: 700;
        }
      }
    }

    .join_date_label {
      line-height: 32px;

      .rule {
        color: red;
      }
    }

    .btn-operate {
      margin-top: 15px;
    }
  }
</style>